<!--统报管理-表格与动态-->
<template>
    <div class="main-wrapper tableTrends-wrapper">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">表格与动态</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                    <el-button class="add-btn" icon="el-icon-plus" @click="creatNew">创建</el-button>
                </div>
            </div>
        </div>
        <div class="main-content p20 w1200 m20">
            <div class="content-box clearfix">
                <ul class="table-list fl clearfix">
                    <li class="fl " v-for="item in tableList" :key="item.id">
                        <el-checkbox v-model="checked">备选项</el-checkbox>
                        <img src="../img/tabe-list-icon.png" alt="">
                        <span>{{ item.name }}</span>
                        <img src="../img/table-list-edit.png" alt="">
                    </li>
                </ul>
                <div class="record-box fr">

                </div>
            </div>
        </div>
        <!--导入Excel-->
        <el-dialog class="dialog-box" title="上传Excel" :visible.sync="uploadDialogVisible" width="34%">
            <div class="dialog-main clearfix upload-dialog">
                <div class="explain">支持10MB以内的xls、xlsx文件,
                    最大行数不超过20000行，列数不超过200列；导入多选类型的控件，请确保Excel字段内各个选项/人员用“，”隔开，否则将无法正常识别数据
                </div>
                <div class="upload-file">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>选择文件</em></div>
                    </el-upload>
                </div>
                <div class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>
                </div>
            </div>
        </el-dialog>
        <!--导出弹框-->
        <el-dialog class="dialog-box" title="导出Excel" :visible.sync="exportDialogVisible" width="34%">
            <div class="dialog-main clearfix export-dialog">
                <div class="dialog-title">导出全部数据</div>
                <div class="dialog-footer">
                    <el-button @click="exportDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportDialogVisible = false">导出</el-button>
                </div>

            </div>
        </el-dialog>
    </div>
</template>

<script src="./tableTrends.js"></script>

<style scoped lang="scss">
    @import "tableTrends";
</style>
